<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		@font-face{
			font-family: "digital";
			src:url(clock/fonts/digital-7.ttf);
		}
		*{
			margin: 0;
			padding: 0;
		}
		body{
			font-family: "digital";
			background-color: #000;
		}
		.clock{
			position: absolute;
			left: 50%;
			top: 50%;
			transform:translateX(-50%) translateY(-50%);
			border:2px solid #fff;
			padding:10px;
		}
		.week{
			font-size: 12px;
			color:#333;
		}
		.time{
			position:relative;
			height: 50px;
		}
		.time h1{
			width: 100%;
			height: 50px;
			line-height: 50px;
			text-align: center;
			font-size: 40px;
			position: absolute;
			top: 0;
			left: 0;
		}
		.time h1:nth-of-type(1){
			color:#fff;
			z-index: 2;
		}
		.time h1:nth-of-type(2){
			color:#333;
		}
		.ap{
			position: absolute;
			right: 50px;
			bottom: 3px;
		}
	</style>
</head>
<body>
	<div class="clock">
		<div class="week">
			<span>SUNDAY</span>
			<span>MONDAY</span>
			<span>TUESDAY</span>
			<span>WEDNESDAY</span>
			<span>THURSDAY</span>
			<span>FRIDAY</span>
			<span>SATURDAY</span>
		</div>
		<div class="time">
			<h1></h1>
			<h1>88:88:88</h1>
		</div>
		<div class="ap">
			<p>AM</p>
			<p>PM</p>
		</div>
	</div>
	<h1></h1>
	<script>
		var h1 = document.querySelector("h1");
		var weekSpan = document.querySelectorAll(".week span");
		var ap = document.querySelectorAll(".ap p")
		/*获取当前时间*/
		function time(){
			var now = new Date();
			var hours = now.getHours();
			var minutes = now.getMinutes();
			var seconds = now.getSeconds();
			var week = now.getDay();
			if(hours>=12){
				ap[1].style.color = "#fff";
				ap[0].style.color = "#333";
			}else{
				ap[1].style.color = "#333";
				ap[0].style.color = "#fff";
			}
			/*加 0 */
			seconds > 9 ? seconds : seconds = "0" + seconds;
			minutes > 9 ? minutes : minutes = "0" + minutes;
			hours > 12 ? hours = hours-12 : hours;
			hours > 9 ? hours : hours = "0" + hours;			
			for(var i = 0;i<weekSpan.length;i++){
					weekSpan[i].style.color ="#333";
				if( i == week){
					weekSpan[i].style.color ="white";
				}
			}
			
			h1.innerHTML = hours + ":" + minutes + ":" + seconds;
		}

		window.setInterval(time,1000)
	</script>
</body>
</html>